<template>
  <a-space direction="vertical">
    <router-link to="/banner/add">
      <a-button type="primary">上传轮播图1</a-button>
    </router-link>
    <a-table row-key="bannerid"  :dataSource="bannerList" >
      <a-table-column key="xu" title="序号">
        <template #default="{ index }">
          <span>
           {{ index + 1 }}
          </span>
        </template>
      </a-table-column>
      <!-- <a-table-column key="img" title="图片">
        <template #default="{ record }">
          <span>
           <a-image :width="200" :src="record.img"/>
          </span>
        </template>
      </a-table-column> -->
      <a-table-column key="img" data-index="img" title="图片">
        <template #default="{ text }">
          <span>
           <a-image :width="200" :src="text"/>
          </span>
        </template>
      </a-table-column>
      <a-table-column key="alt" data-index="alt" title="提示" />
      <a-table-column key="link" data-index="link" title="链接" />
      <a-table-column key="more" title="操作">
        <template #default="{ record }">
          <a-popconfirm
            title="确定删除吗?"
            ok-text="删除"
            cancel-text="取消"
            @confirm="confirm(record.bannerid)"
            @cancel="cancel"
          >
            <a-button danger >删除</a-button>
          </a-popconfirm>
        </template>
      </a-table-column>
    </a-table>
  </a-space>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { getBannerList, deleteBannerItem } from './../../api/banner'
export default defineComponent({
  setup () {
    const bannerList = ref([])
    const getBannerData = () => {
      getBannerList().then(res => {
        console.log(res)
        bannerList.value = res.data
      })
    }
    onMounted(() => {
      getBannerData()
    })

    const confirm = (bannerid: string) => {
      deleteBannerItem({ bannerid }).then(() => {
        getBannerData()
      })
    }
    const cancel = () => {
      console.log('')
    }
    return {
      bannerList,
      confirm,
      cancel
    }
  }
})
</script>

<style lang="less" scoped>
.ant-space {
  width: 100%;
}
</style>
